// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
// ┃ This file is part of the Perspective library, distributed under the terms ┃
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

@import "./pro.less";
@import "./mitered-headers.less";
@import "./row-hover.less";
@import "./sub-cell-scroll.less";
@import "./scrollbar.less";

// Row Selection

@mixin icon {
    background-repeat: no-repeat;
    background-color: var(--icon--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
}

perspective-viewer:not([settings]) {
    @include settings-not-open;
}

:host-context(perspective-viewer:not([settings])) {
    @include settings-not-open;
}

@mixin settings-not-open {
    regular-table table tr.rt-autosize + tr th {
        height: 0px;
        span {
            display: none;
        }
    }
}

@mixin settings-open {
    .psp-menu-enabled {
        padding: 0 6px;
        font-size: 8px;
        border-radius: 3px 3px 0 0;
    }

    .psp-menu-enabled:hover,
    tr:not(.rt-autosize) th.psp-menu-open {
        color: var(--plugin--background);
        background-color: var(--icon--color);
        border-bottom-color: var(--icon--color);
        cursor: pointer;
    }

    tr:not(.rt-autosize) th.psp-menu-open {
        &:before {
            @include icon;
            height: 8px;
            width: 10px;
            -webkit-mask-image: var(--column-settings-icon--mask-image);
            mask-image: var(--column-settings-icon--mask-image);
            margin-right: 4px;
            background-color: var(--plugin--background);
        }
    }

    td.psp-menu-open {
        box-shadow:
            inset -2px 0px 0px var(--icon--color),
            inset 2px 0px 0px var(--icon--color);
    }

    tr:first-child td.psp-menu-open {
        border-top-color: var(--icon--color) !important;
    }

    tr:last-child td.psp-menu-open {
        box-shadow:
            inset -2px 0px 0px var(--icon--color),
            inset 2px 0px 0px var(--icon--color),
            inset 0px -2px 0px var(--icon--color);
    }
}

perspective-viewer[settings] {
    @include settings-open;
}

:host-context(perspective-viewer[settings]) {
    @include settings-open;
}

@mixin viewer-table-styles {
    regular-table table thead tr:last-child th {
        border-bottom-width: 1px;
        border-bottom-color: var(--inactive--border-color, #8b868045);
    }
}

perspective-viewer {
    @include viewer-table-styles;
}

:host-context(perspective-viewer) {
    @include viewer-table-styles;
}

.psp-sort-enabled:hover {
    cursor: pointer;
}

.psp-row-selected,
:hover .psp-row-selected,
:hover th.psp-tree-leaf.psp-row-selected,
:hover th.psp-tree-label.psp-row-selected {
    color: white !important;
    background-color: var(--selected-row--background-color, #ea7319) !important;
    border-color: var(--selected-row--background-color, #ea7319) !important;
}

.psp-row-selected.psp-tree-label:not(:hover):before {
    color: white;
}

.psp-row-subselected,
:hover .psp-row-subselected,
:hover th.psp-tree-leaf.psp-row-subselected,
:hover th.psp-tree-label.psp-row-subselected {
    background: rgba(234, 115, 25, 0.2) !important;
}

.psp-error {
    color: red;
}

td:focus {
    outline: #666;
    outline-style: dotted;
    outline-width: 1px;
}

@mixin table-no-dragging {
    regular-table {
        pointer-events: none;
    }
}
perspective-viewer.dragging {
    @include table-no-dragging;
}
:host-context(perspective-viewer.dragging) {
    @include table-no-dragging;
}

.psp-header-border:last-child {
    border-right-width: 0px;
}

.psp-header-sort-desc:after {
    @include icon;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--sort-desc-icon--mask-image);
    mask-image: var(--sort-desc-icon--mask-image);
}

.psp-header-sort-asc:after {
    @include icon;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--sort-asc-icon--mask-image);
    mask-image: var(--sort-asc-icon--mask-image);
}

.psp-header-sort-col-desc:after {
    @include icon;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--sort-col-desc-icon--mask-image);
    mask-image: var(--sort-col-desc-icon--mask-image);
}

.psp-header-sort-col-asc:after {
    @include icon;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--sort-col-asc-icon--mask-image);
    mask-image: var(--sort-col-asc-icon--mask-image);
}

.psp-header-sort-abs-desc:after {
    @include icon;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--sort-abs-desc-icon--mask-image);
    mask-image: var(--sort-abs-desc-icon--mask-image);
}

.psp-header-sort-abs-asc:after {
    @include icon;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--sort-abs-asc-icon--mask-image);
    mask-image: var(--sort-abs-asc-icon--mask-image);
}

.psp-header-sort-abs-col-desc:after {
    @include icon;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image);
    mask-image: var(--sort-abs-col-desc-icon--mask-image);
}

.psp-header-sort-abs-col-asc:after {
    @include icon;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image);
    mask-image: var(--sort-abs-col-asc-icon--mask-image);
}

tbody th:last-of-type {
    border-right: 1px solid var(--inactive--border-color, #8b868045);
    overflow: hidden;
    text-overflow: ellipsis;
}
tbody th:empty {
    background-image: linear-gradient(
        to right,
        transparent 9px,
        var(--inactive--border-color, #eee) 10px,
        transparent 11px
    );
    background-repeat: no-repeat;
    min-width: 20px;
    max-width: 20px;
    pointer-events: none;
}
.psp-tree-label {
    max-width: 0px;
    min-width: 0px;
}
.psp-tree-label:before {
    color: var(--icon--color);
    font-family: var(--button--font-family, inherit);
    padding-right: 11px;
}
.psp-tree-label-expand:before {
    content: var(--tree-label-expand--content, "+");
}
.psp-tree-label-collapse:before {
    content: var(--tree-label-collapse--content, "-");
}
.psp-tree-label-expand,
.psp-tree-label-collapse {
    cursor: pointer;
}

.psp-tree-label:hover:before {
    color: var(--active--color);
    text-shadow: 0px 0px 5px var(--active--color);
}

.psp-tree-leaf {
    padding-left: 24px;
}

.psp-align-right {
    text-align: right;
}
.psp-align-left {
    text-align: left;
}
.psp-positive:not(:focus) {
    color: var(--rt-pos-cell--color);
}
.psp-negative:not(:focus) {
    color: var(--rt-neg-cell--color);
}

regular-table table tbody td {
    min-width: 52px !important;
}

.psp-is-width-override .rt-column-resize,
.rt-column-resize:hover {
    border: 1px dashed #999;
    border-bottom-width: 0px;
    border-left-width: 0px;
}

.boolean-editable {
    cursor: pointer;
}

regular-table table {
    user-select: none;
    color: inherit;
    border-collapse: separate;

    th {
        font-weight: 400;
    }

    td,
    th {
        border-color: var(--inactive--border-color, #8b868045);
        height: 23px;
    }

    .psp-header-group {
        text-overflow: ellipsis;
    }

    th.psp-header-leaf {
        border-bottom-width: 0px;
        span {
            height: 23px;
            min-height: 23px;
        }
    }

    td,
    th.psp-tree-label,
    th.psp-tree-label,
    th.psp-tree-leaf,
    tbody tr:first-child th {
        border-style: solid;
        border-width: 0px;
        border-top-width: 1px;
    }

    tbody th:empty {
        background-position: 0px -10px;
    }

    td.psp-select-region,
    th.psp-select-region {
        // transition: background-color 0.5s, color 0.5s, border-color 0.5s;
        background-color: var(--icon--color) !important;
        color: var(--plugin--background) !important;
        border-color: var(--plugin--background) !important;
    }
}

regular-table
    tbody
    tr:hover
    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected),
regular-table
    tbody
    tr:hover
    + tr
    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected) {
    border-color: var(--plugin--background) !important;
}

regular-table tbody tr:hover {
    td.psp-select-region.psp-menu-open {
        &:not(.psp-row-selected):not(.psp-row-subselected) {
            box-shadow:
                inset -2px 0px 0px var(--plugin--background),
                inset 2px 0px 0px var(--plugin--background);
        }
    }
}

:host-context(perspective-viewer[settings]) td.psp-select-region.psp-menu-open {
    box-shadow:
        inset -2px 0px 0px var(--plugin--background),
        inset 2px 0px 0px var(--plugin--background);
}

// This is a design/architecture bug. When the datagrid draws during a sidepanel
// collapse/uncollapse, the `settings` attribute is set to the _previous_ state
// as this collapse takes a while and we dont want the new state CSS to apply
// until the drawing is done. However, this causes the datagrid to draw its
// _first_ frame as if its in the wrong state, as it detects sidepanel state
// via HTML attribute checking.
@mixin design-slash-architecture-bug {
    regular-table #psp-column-edit-buttons:after {
        content: none;
    }
}

regular-table
    #psp-column-edit-buttons
    th:not(.rt-group-corner)
    span:not(.rt-column-resize):before {
    content: var(--datagrid-column-edit-button--content, "Edit");
}

perspective-viewer:not([settings]) {
    @include design-slash-architecture-bug;
}

:host-context(perspective-viewer:not([settings])) {
    @include design-slash-architecture-bug;
}

// Style the last row of the `<thead>` so that is has a bottom border.
regular-table table thead tr:last-child:after {
    width: 10000px;
    box-sizing: border-box;
    display: block;
    height: 23px;
    content: " ";
    border-bottom: 1px solid var(--inactive--border-color);
}

// Extend every row to the right edge of the page with a fake column.
regular-table table tbody tr:after {
    width: 10000px;
    box-sizing: border-box;
    display: block;
    height: 23px;
    content: " ";
    border-top: 1px solid transparent;
}

regular-table table tbody tr:not(:first-child):after {
    border-top: 1px solid var(--inactive--border-color);
}

regular-table table tbody tr:hover:not(:first-child):after {
    border-top: 1px solid var(--rt-hover--border-color);
}

regular-table table tbody tr:hover + tr:after {
    border-top: 1px solid var(--rt-hover--border-color);
}

@keyframes pulse_pos {
    0% {
        background-color: var(
            --pulse--background-color-start,
            rgba(0, 128, 255, 0.5)
        );
    }
    100% {
        background-color: var(
            --pulse--background-color-end,
            rgba(0, 128, 255, 0)
        );
    }
}

@keyframes pulse_pos2 {
    0% {
        background-color: var(
            --pulse--background-color-start,
            rgba(0, 128, 255, 0.5)
        );
    }
    100% {
        background-color: var(
            --pulse--background-color-end,
            rgba(0, 128, 255, 0)
        );
    }
}

@keyframes pulse_neg {
    0% {
        background-color: var(
            --pulse--background-color-start,
            rgba(255, 25, 0, 0.5)
        );
    }
    100% {
        background-color: var(
            --pulse--background-color-end,
            rgba(255, 25, 0, 0)
        );
    }
}

@keyframes pulse_neg2 {
    0% {
        background-color: var(
            --pulse--background-color-start,
            rgba(255, 25, 0, 0.5)
        );
    }
    100% {
        background-color: var(
            --pulse--background-color-end,
            rgba(255, 25, 0, 0)
        );
    }
}
